<template>
  <view class="pageContent" >
    <view class="houseMain" v-for="(item,index) in headList" :key="index" @click="selectHead(index)"
    :class="item.roomId==room.roomId ? 'select' : ''">
      <view class="houseTil">
        <view class="houseTilNa">{{item.projectName || '项目名称'}}</view>
        <!-- <view>入住日期</view> -->
      </view>
      <view class="houseNo">
        <view>{{item.roomInfo+'-'+item.roomName}}</view>
        <view class="houseMes">
          <!-- <view class="houseMesIt">{{item.name}}</view> -->
          <view class="houseMesIt" v-if="item.aaa">{{item.aaa}}</view>
        </view>
      </view>
      <view class="handler">
        <view class="handlerCha handlerRed" @click.stop="goDoorList(index)">门禁权限</view>
        <view class="handlerCha handlerBlu" @click.stop="addMem(index)">添加成员</view>
      </view>
      <image class="houseListIm" v-if="item.roomId==room.roomId" :src="localImages +'/selectHouse.png'"/>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      headList: [],
      room: '',
    }
  },
  computed: {
    ...mapState({
      myInfo: state => state.user.myInfo
    })
  },
  onLoad(){
    var room = wx.getStorageSync('room');
    this.room=room;
    this.ownerRoomList();
  },
  onShow(){
    util.socketTest();
  },
  methods: {
    goDoorList(index){
      var item=this.headList[index];
      var json=JSON.stringify(item);
      console.warn(item,json)
      wx.navigateTo({url:'/pages/subMe/doorList/main?json='+json})
    },
    noticeList(room) {
      return new Promise((resolve,reject)=>{
        var url='/UserServer/weChat/ownerLogin'
        var phone=wx.getStorageSync('phone');
        var openId=wx.getStorageSync('openId');
        var params={"telephone":phone,"roomIdNow":room.roomId,"openId":openId}
        util.wxRequestPro(url,params,"POST").then((res)=>{
          console.warn('ownerLogin',res)
          var param =res.param
          wx.setStorageSync('room', room);
          wx.setStorageSync('userMsg', param);
          this.room=room
          resolve(res)
        }).catch((res)=>{
          console.warn('catch=ownerLogin',res)
        })
      })
    },
    ownerRoomList(){
      var phoneNumber=wx.getStorageSync('phone');
      //获取业主该手机号绑定的房屋列表
      var params={telephone :phoneNumber}
      util.wxRequestPro('/UserServer/room/ownerRoomList',params)
      .then((res)=>{
        console.warn('ownerRoomList',res)
        var param=res.param;
        this.headList=param
      }).catch((res)=>{
        if(res.statusCode==400) {
          wx.showToast({
              title: res.statusInfo || '手机没有绑定房屋',
              icon: 'none'
          })
        }
      })
    },
    selectHead(index){
      var item=this.headList[index]
      this.noticeList(item);
    },
    //先选择了当前房屋，再进行添加成员的操作
    addMem(index){
      wx.showLoading({ title: '', mask: true,duration:800 })
      var item=this.headList[index]
      if(item.roomId==this.room.roomId) {
        wx.navigateTo({url:'/pages/subMe/addMem/main'})
      }else{
        this.noticeList(item).then(()=>{
          wx.navigateTo({url:'/pages/subMe/addMem/main'})
        });
      }
    },

  }
}
</script>

<style lang="stylus" scoped>
.pageContent
  height 100vh
  background #F3F6F9
  padding: 20rpx 0rpx 0rpx 0rpx;
.houseMain
  position relative
  background #FFFFFF
  padding: 0rpx 14rpx 0rpx 14rpx;
  margin: 0rpx 0rpx 20rpx 0rpx;
  // border 1rpx solid aqua
.houseMain.select{
  box-shadow: 2rpx 6rpx 8rpx 0px rgba(201, 206, 216, 0.5);
}
.houseTil
  display flex
  justify-content space-between
  padding: 14rpx 14rpx 14rpx 14rpx;
  line-height: 45rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3px solid #E7E7E7;
.houseTilNa{
  font-size 32rpx
  font-weight bold
}
.houseNo
  padding: 14rpx 14rpx 14rpx 14rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3px solid #E7E7E7;
.houseListIm{
  position absolute
  width 109rpx
  height 91rpx
  top 5rpx
  right 156rpx
  // border 1rpx solid #ccc
}
.houseMes{
  display flex
  padding: 14rpx 0rpx 14rpx 0rpx;
}
.houseMesIt{
  height: 40rpx;
  line-height: 40rpx;
  background: #F2F8FF;
  border-radius: 6rpx;
  border: 1px solid #BCDEFF;
  color: #519AEE;
  font-size: 28rpx;
  margin-right 10rpx;
  padding: 0rpx 14rpx 0rpx 14rpx;
}
.handler {
  display: flex;
  justify-content: flex-end;
  padding: 14rpx 14rpx 20rpx 14rpx;
  width: 100%;
  // border 1px solid aqua
}
.handlerCha{
  height: 60rpx;
  width 160rpx;
  line-height: 60rpx;
  background: #DDDDDD;
  border-radius: 30rpx;
  color: #FFFFFF;
  text-align center
  font-weight bold
  // padding: 0rpx 40rpx 0rpx 40rpx;
}
.handlerBlu{
  background: #1086FF;
  margin-left 18rpx
}
.handlerRed{
  background: #FF635D;
  margin-left 18rpx
}
</style>
